<!-- 统计页面 - 显示任务完成情况统计 -->
<template>
  <view class="statistics-page">
    <!-- 导航栏 -->
    <NavBar title="学习统计" showBack="true"></NavBar>
    
    <!-- 主内容区域 -->
    <view class="main-content">
      <!-- 时间筛选器 -->
      <view class="time-filter">
        <label>时间范围：</label>
        <uni-picker
          v-model="timeRange"
          :range="timeRangeOptions"
          @change="onTimeRangeChange"
        ></uni-picker>
      </view>
      
      <!-- 统计卡片 -->
      <view class="stat-cards">
        <view class="stat-card">
          <view class="stat-value">{{ taskStatistics.completedTasks }}</view>
          <view class="stat-label">已完成任务</view>
        </view>
        <view class="stat-card">
          <view class="stat-value">{{ taskStatistics.pendingTasks }}</view>
          <view class="stat-label">待完成任务</view>
        </view>
        <view class="stat-card">
          <view class="stat-value">{{ taskStatistics.completionRate }}%</view>
          <view class="stat-label">完成率</view>
        </view>
      </view>
      
      <!-- 图表区域 -->
      <view class="chart-container">
        <view class="chart-title">每日完成任务</view>
        <view class="chart-content">
          <!-- 柱状图 -->
          <view class="bar-chart">
            <view 
              class="chart-bar"
              v-for="(value, index) in weeklyTaskData"
              :key="index"
              :style="{ height: `${Math.min(value * 20, 200)}rpx` }"
            >
              <view class="bar-value">{{ value }}</view>
            </view>
          </view>
          <!-- 横轴标签 -->
          <view class="chart-labels">
            <view class="chart-label" v-for="(label, index) in weekLabels" :key="index">{{ label }}</view>
          </view>
        </view>
      </view>
      
      <!-- 任务类型统计 -->
      <view class="task-type-stats">
        <view class="section-title">任务类型分布</view>
        <view class="type-stats-list">
          <view class="type-stat-item">
            <view class="type-name">学习任务</view>
            <view class="type-progress">
              <view class="progress-bar">
                <view class="progress-fill" :style="{ width: '70%' }"></view>
              </view>
              <view class="progress-text">70%</view>
            </view>
          </view>
          <view class="type-stat-item">
            <view class="type-name">户外活动</view>
            <view class="type-progress">
              <view class="progress-bar">
                <view class="progress-fill" :style="{ width: '20%' }"></view>
              </view>
              <view class="progress-text">20%</view>
            </view>
          </view>
          <view class="type-stat-item">
            <view class="type-name">阅读任务</view>
            <view class="type-progress">
              <view class="progress-bar">
                <view class="progress-fill" :style="{ width: '10%' }"></view>
              </view>
              <view class="progress-text">10%</view>
            </view>
          </view>
        </view>
      </view>
      
      <!-- 连续完成天数 -->
      <view class="streak-card">
        <uni-icons type="fire" size="40" color="#FF9800"></uni-icons>
        <view class="streak-info">
          <view class="streak-value">7</view>
          <view class="streak-label">连续完成天数</view>
        </view>
        <view class="streak-rank">
          <text>班级排名 3/25</text>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
// 导入组件
import NavBar from '../../components/NavBar.vue'

export default {
  components: {
    NavBar
  },
  data() {
    return {
      // 时间范围选项
      timeRangeOptions: ['本周', '本月', '全部'],
      // 当前选择的时间范围
      timeRange: 0,
      // 周标签
      weekLabels: ['周一', '周二', '周三', '周四', '周五', '周六', '周日']
    }
  },
  computed: {
    // 从Vuex获取任务统计数据
    taskStatistics() {
      return this.$store.getters.taskStatistics
    },
    
    // 从Vuex获取周任务数据
    weeklyTaskData() {
      return this.$store.getters.weeklyTaskData
    }
  },
  methods: {
    // 时间范围变化
    onTimeRangeChange(e) {
      this.timeRange = e.detail.value
      // 这里可以根据选择的时间范围更新统计数据
      // 目前我们只有周数据，所以暂时不做实际的数据更新
      uni.showToast({
        title: `已切换到${this.timeRangeOptions[this.timeRange]}视图`,
        icon: 'none'
      })
    }
  },
  onShow() {
    // 页面显示时，刷新统计数据
    // 如果统计数据需要从服务器获取，可以在这里调用API
  }
}
</script>

<style scoped>
.statistics-page {
  padding-top: 88rpx; /* 导航栏高度 */
  min-height: 100vh;
  background-color: #f5f5f5;
}

.main-content {
  padding: 20rpx;
}

.time-filter {
  background-color: white;
  padding: 20rpx;
  border-radius: 10rpx;
  margin-bottom: 20rpx;
  box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.05);
}

.time-filter label {
  font-size: 28rpx;
  color: #666;
}

.stat-cards {
  display: flex;
  justify-content: space-between;
  margin-bottom: 30rpx;
}

.stat-card {
  flex: 1;
  background-color: white;
  padding: 30rpx 20rpx;
  margin: 0 10rpx;
  border-radius: 10rpx;
  text-align: center;
  box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.05);
}

.stat-value {
  font-size: 48rpx;
  font-weight: bold;
  color: #4CAF50;
  margin-bottom: 10rpx;
}

.stat-label {
  font-size: 24rpx;
  color: #666;
}

.chart-container {
  background-color: white;
  padding: 30rpx;
  border-radius: 10rpx;
  margin-bottom: 30rpx;
  box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.05);
}

.chart-title {
  font-size: 32rpx;
  font-weight: bold;
  margin-bottom: 20rpx;
  color: #333;
}

.chart-content {
  display: flex;
  align-items: flex-end;
  height: 300rpx;
  padding: 20rpx 0;
}

.bar-chart {
  flex: 1;
  display: flex;
  justify-content: space-around;
  align-items: flex-end;
  height: 100%;
}

.chart-bar {
  width: 60rpx;
  background-color: #4CAF50;
  border-radius: 10rpx 10rpx 0 0;
  position: relative;
  transition: height 0.3s ease;
}

.bar-value {
  position: absolute;
  top: -40rpx;
  left: 50%;
  transform: translateX(-50%);
  font-size: 24rpx;
  color: #666;
  min-width: 40rpx;
  text-align: center;
}

.chart-labels {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  display: flex;
  justify-content: space-around;
  padding: 0 20rpx;
}

.chart-label {
  text-align: center;
  font-size: 24rpx;
  color: #999;
  width: 60rpx;
}

.task-type-stats {
  background-color: white;
  padding: 30rpx;
  border-radius: 10rpx;
  margin-bottom: 30rpx;
  box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.05);
}

.section-title {
  font-size: 32rpx;
  font-weight: bold;
  margin-bottom: 20rpx;
  color: #333;
}

.type-stats-list {
  space-y: 20rpx;
}

.type-stat-item {
  margin-bottom: 20rpx;
}

.type-name {
  font-size: 28rpx;
  color: #666;
  margin-bottom: 10rpx;
}

.type-progress {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.progress-bar {
  flex: 1;
  height: 20rpx;
  background-color: #f0f0f0;
  border-radius: 10rpx;
  overflow: hidden;
  margin-right: 20rpx;
}

.progress-fill {
  height: 100%;
  background-color: #FF9800;
  border-radius: 10rpx;
  transition: width 0.3s ease;
}

.progress-text {
  font-size: 24rpx;
  color: #666;
  min-width: 60rpx;
  text-align: right;
}

.streak-card {
  background-color: white;
  padding: 30rpx;
  border-radius: 10rpx;
  box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.05);
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.streak-info {
  text-align: center;
}

.streak-value {
  font-size: 48rpx;
  font-weight: bold;
  color: #FF9800;
}

.streak-label {
  font-size: 24rpx;
  color: #666;
}

.streak-rank {
  font-size: 24rpx;
  color: #999;
}
</style>